<template>
  <div class="question-submit-container">
    <h2 class="title">星宇信息化问题反馈中心</h2>
    <el-form ref="questionForm" :model="form" :rules="rules" label-width="80px" :label-position="isMobile? 'top' : 'left'">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name" placeholder="请输入姓名" :disabled="isEdit && form.id" />
      </el-form-item>
      <el-form-item label="电话" prop="tel">
        <el-input v-model="form.tel" placeholder="请输入电话" :disabled="isEdit && form.id" />
      </el-form-item>
      <el-form-item label="部门" prop="department">
        <el-input v-model="form.department" placeholder="请输入部门" :disabled="isEdit && form.id" />
      </el-form-item>
      <el-form-item label="问题描述" prop="des" >
        <el-input class="description-form-item" :autosize="{ minRows: 5, maxRows: 8 }" v-model="form.des" type="textarea" placeholder="请输入内容" :disabled="isEdit && form.id" />
      </el-form-item>
      <el-form-item class="submit-button-container">
        <el-button type="primary" @click="submitForm">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup name="QuestionSubmit">
import { addQuestion } from "@/api/question/question";
import { getCurrentInstance, ref } from "vue";

const { proxy } = getCurrentInstance();

const form = ref({
  id: null,
  name: null,
  tel: null,
  department: null,
  des: null,
  status: null,
  createTime: null,
  updateTime: null
});

const validateName = (rule, value, callback) => {
  if (!value) {
    callback(new Error('姓名不能为空'));
  } else {
    // 匹配前面是 1 到 5 个汉字，后面可以跟 0 到 3 个数字的字符串
    const reg = /^[\u4e00-\u9fa5]{1,5}\d{0,3}$/;
    if (!reg.test(value)) {
      callback(new Error('姓名不合规范，请重新输入'));
    } else {
      callback();
    }
  }
};

const validateTel = (rule, value, callback) => {
  if (!value) {
    callback(new Error('电话不能为空'));
  } else {
    const reg = /^(?:\d{5}|\d{11})$/;
    if (!reg.test(value)) {
      callback(new Error('请输入 11 位手机号码'));
    } else {
      callback();
    }
  }
};

const rules = ref({
  name: [
    { required: true, validator: validateName, trigger: 'blur' },
  ],
  tel: [
    { required: true, validator: validateTel, trigger: 'blur' },
  ],
  department: [
    { required: true, message: '部门不能为空', trigger: 'blur' }
  ],
  des: [
    { required: true, message: '问题描述不能为空', trigger: 'blur' }
  ],
  // 备注不设置必填
  status: []
});

const isEdit = ref(false);
const isMobile = ref(false);

// 检查设备是否为手机
const checkDevice = () => {
  if (window.innerWidth < 768) {
    isMobile.value = true;
  } else {
    isMobile.value = false;
  }
};

window.addEventListener('resize', checkDevice);
checkDevice();

/** 提交按钮 */
function submitForm() {
  proxy.$refs["questionForm"].validate(valid => {
    if (valid) {
      addQuestion(form.value, { isToken: false }).then(response => {
        proxy.$modal.msgSuccess("已提交成功，请等待反馈");
        form.value = {
          id: null,
          name: null,
          tel: null,
          department: null,
          des: null,
          status: null,
          createTime: null,
          updateTime: null
        };
      });
    }
  });
}
</script>

<style scoped>
.question-submit-container {
  padding: 20px;
}

.title {
  text-align: center;
  margin-bottom: 20px;
}

.submit-button-container {
  display: flex;
  margin-left: 80%;
  justify-content: flex-end;
}

@media (max-width: 768px) {
  .question-submit-container {
    padding: 10px;
  }
}


</style>